<template>
  <div class="main-container" style="height: 100%">
    <div class="item-content" style="height: 100%">
      <div class="form-content" style="margin-bottom: 20px; height: 100%">
        <div style="height: 100%">
          <myTable
            :loading="isLoading"
            tabHeight="600"
            ref="table"
            :data="data"
            :label="label"
            :linkShow="true"
            :addShow="true"
            :searchShow="true"
            :paginationConfig="paginationConfig"
            :pagingShow="true"
            :multiSelectShow="true"
            @deleteRow="deleteRow"
            @selectionChange="selectionChange"
            @changePage="changePage"
            @changeSize="changeSize"
          >
            <template #first>
              <myUpload
                @addFile="addFile"
                :showList="false"
                :limit="1"
              ></myUpload>
              <el-button type="danger" size="default" @click="deleteList()"
                >批量删除 <i class="el-icon-delete"></i>
              </el-button>
            </template>
            <template #second>
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  gap: 10px;
                "
              >
                <el-input
                  placeholder="请输入"
                  v-model="searchValue"
                  size="small"
                  class="input-with-select"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="search"
                  ></el-button>
                </el-input>
                <el-button
                  size="small"
                  icon="el-icon-refresh"
                  @click="changeTable()"
                ></el-button>
              </div>
            </template>
            <template #createTime="obj">
              <el-date-picker
                v-model="obj.params.createTime"
                type="date"
                disabled
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
          </myTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const searchValue = ref();
const search = async () => {
  changeTable(searchValue.value);
  searchValue.value = null;
};
const paginationConfig = ref({
  page: 1,
  size: 10,
  total: 0,
});
const changePage = (val) => {
  paginationConfig.value.page = val;
  changeTable();
};
const changeSize = (val) => {
  paginationConfig.value.size = val;
  changeTable();
};
import {
  getSafetyRegulations,
  deleteSafetyRegulations,
  addSafetyRegulations,
} from "@/api/safetymanagement";
import { ref, defineComponent, onMounted } from "vue";
import myTable from "@/components/my-table.vue";
const NewComponentName = defineComponent({
  name: "NewComponentName",
});
console.log(NewComponentName);

import { Notification } from "element-ui";

const isLoading = ref(true);
const deleteRow = (id) => {
  selectList.value = [id];
  deleteList();
};
const changeTable = async (name) => {
  isLoading.value = true;
  let result = await getSafetyRegulations(
    paginationConfig.value.page,
    paginationConfig.value.size,
    name
  );
  console.log(result.message);
  console.log(result.data);
  paginationConfig.value.total = Number(result.message);
  isLoading.value = false;
  //   data.value = result.data;
};
onMounted(() => {
  changeTable();
});
//上传文件
const addFile = async (list) => {
  let result = await addSafetyRegulations({
    fileName: list[0].name,
    fileUrl: list[0].url,
  });
  if (result.code == 0) {
    Notification({
      title: "成功",
      message: "上传成功",
      type: "success",
    });
    changeTable();
  } else {
    Notification({
      title: "失败",
      message: "上传失败",
      type: "error",
    });
  }
};
//批量选择的数据
const selectList = ref();
const selectionChange = (value) => {
  selectList.value = value;
};
//删除所选中的
const deleteList = async () => {
  if (selectList.value.length == 0) {
    Notification({
      title: "警告",
      message: "请选择要删除的项",
      type: "warning",
    });
    return;
  }
  let result = await deleteSafetyRegulations(selectList.value);
  if (result.code == 0) {
    Notification({
      title: "成功",
      message: "删除成功",
      type: "success",
    });
    paginationConfig.value.page = 1;
    changeTable();
  } else {
    Notification({
      title: "失败",
      message: "删除失败",
      type: "error",
    });
  }
};
//选中的id
selectionChange([]);
const table = ref(null);

const data = ref([]);
const label = ref([
  {
    label: "时间",
    prop: "a",
  },
  {
    label: "序号",
    prop: "b",
  },
  {
    label: "检查项目",
    prop: "c",
  },
  {
    label: "检查内容",
    prop: "d",
  },
  {
    label: "合格勾选",
    prop: "c",
  },
  {
    label: "检查发现的问题",
    prop: "c",
  },
]);
</script>
<style lang="scss" scoped>
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }
/*去除upload组件过渡效果*/
::v-deep .el-upload-list__item {
  transition: none !important;
}
::v-deep .el-upload-list__item-thumbnail {
  /* 图片在方框内显示长边 */
  object-fit: scale-down !important;
}
:deep(.el-input__inner) {
  height: auto !important;
}
:deep(.el-icon-arrow-right:before) {
  font-size: 12px !important;
}
:deep(.el-table th) {
  background: #fafafa;
}
:deep(.el-collapse-item__header) {
  font-weight: bold;
  color: #333;
  font-size: 15px;
  padding: 0 10px;
}
:deep(.el-icon-arrow-right:before) {
  font-weight: bold;
  color: #333;
  font-size: 25px;
}
body {
  min-height: 100vh;

  transition: all 0.3s ease;
}
.container {
  height: 100%;
  padding: 15px;
  overflow: auto;
  box-sizing: border-box;

  .main-content {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    min-width: 700px;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }
    }
  }
}

.main {
  padding: 12px 15px;

  .item-content {
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .item-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .subheading {
        position: relative;
        color: #555;
        font-size: 14px;
        padding-left: 14px;

        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 7px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 4px;
          top: calc(50% - 7px);
          position: absolute;
        }
      }
    }

    .content-container {
      margin-top: -1px;
    }
  }
}

.w-100 {
  width: 100%;
}

.item-form-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  i {
    margin: 0 10px;
  }
}

.productList-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.form-content {
  padding: 0 10px;
}
.dialog-action-bar {
  text-align: center;
  margin-top: 30px;
}
</style>
